<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style/reset.css">
	<link rel="stylesheet" href="style/main.css">
</head>
<body>
	<div class="header-bar">
		<div class="top-bar">
			<div class="com-width">
				<div class="left-area">
					<a href="#" class="collection">收藏慕课</a>
				</div>
				<div class="right-area">
					欢迎来到慕课网！<a href="#">[登录]</a><a href="">[免费注册]</a>
				</div>
			</div>
		</div>
		<div class="logo-bar">
			<div class="com-width">
				<div class="logo fl">
					<a href="#"><img src="images/logo.jpg" alt="慕课网"></a>
				</div>
				<div class="search-box fl" >
					<input type="text" class="search-text fl">
					<input type="button" value="搜索" \
					class="search-btn fr" />
				</div>
				<div class="shop-car fr">
					<span class="shop-text fl">购物车</span>
					<span class="shop-num fl">0</span>
				</div>
			</div>
		</div>
		<div class="nav-box">
			<div class="com-width">
				<div class="shop-class fl hide">
					<h3>全部商品分类<i></i></h3>
					<div class="shop-class-show">
						<dl class="shop-class-item">
							<dt><a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="alink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shop-class-item">
							<dt><a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="alink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shop-class-item">
							<dt><a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="alink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shop-class-item">
							<dt><a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="alink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shop-class-item">
							<dt><a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="alink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
					</div>
					<div class="shop-class-list hide">
						<div class="shop-class-count">
							<dl class="shop-list-item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">笔记本</a>
									<a href="#">超极本</a>
									<a href="#">上网本</a>
									<a href="#">平板电脑</a>
									<a href="#">台式机</a>
								</dd>
							</dl>
						<dl class="shop-list-item">
							<dt>电脑装机</dt>
							<dd>
								<a href="#">笔记本</a>
								<a href="#">超极本</a>
								<a href="#">上网本</a>
								<a href="#">平板电脑</a>
								<a href="#">台式机</a>
								<a href="#">笔记本</a>
								<a href="#">超极本</a>
								<a href="#">上网本</a>
								<a href="#">平板电脑</a>
								<a href="#">台式机</a>
							</dd>
						</dl>
							<dl class="shop-list-item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">笔记本</a>
									<a href="#">超极本</a>
									<a href="#">上网本</a>
									<a href="#">平板电脑</a>
									<a href="#">台式机</a>
									<a href="#">台式机</a>
									<a href="#">台式机</a>
								</dd>
							</dl>
							<dl class="shop-list-item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">笔记本</a>
									<a href="#">超极本</a>
									<a href="#">上网本</a>
									<a href="#">平板电脑</a>
									<a href="#">台式机</a>
									<a href="#">平板电脑</a>
								</dd>
							</dl>
							<dl class="shop-list-item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">笔记本</a>
									<a href="#">超极本</a>
									<a href="#">上网本</a>
									<a href="#">平板电脑</a>
									<a href="#">台式机</a>
									<a href="#">平板电脑</a>
									<a href="#">平板电脑</a>
									<a href="#">笔记本</a>
									<a href="#">超极本</a>
									<a href="#">上网本</a>
									<a href="#">平板电脑</a>
								</dd>
							</dl>
							<dl class="shop-list-item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">笔记本</a>
									<a href="#">超极本</a>
									<a href="#">上网本</a>
									<a href="#">平板电脑</a>
									<a href="#">台式机</a>
								</dd>
							</dl>
							<div class="shop-list-links">
								<a href="#">
									电脑整机频道
									<span></span>
								</a>
								<a href="#">
									硬件/外设频道
									<span></span>
								</a>
							</div>
						</div>
					</div>
				</div>
				<ul class="nav fl">
					<li><a href="#" class="acitve">数码城</a></li>
					<li><a href="#">天黑黑</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">发现</a></li>
					<li><a href="#">二手特卖</a></li>
					<li><a href="#">名品会</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>